<template>
	<div class="zs-align-center zs-space-bottom zs-space-top-lg zs-space-bottom-sm" :id="id">
		<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
		<div class="zs-title">{{ title }}</div>
	</div>
	<div class="zs-card zs-space-bottom">
		<slot name="before" />
		<el-form :validate-on-rule-change="false" ref="TimeForm" :model="createData.data" :label-width="labelWidth || '100px'">
			<el-form-item :label="userLabel">
				<el-input disabled v-model="createData.name" />
			</el-form-item>
			<el-form-item :label="timeLabel">
				<el-date-picker disabled v-model="createData.time" style="width: 100%" type="date" placeholder=" " format="YYYY-MM-DD HH:mm:ss" value-format="x" />
			</el-form-item>
			<slot name="after" />
		</el-form>
	</div>
</template>

<script setup>
	import { reactive } from 'vue';
	// eslint-disable-next-line no-unused-vars
	let props = defineProps({
		title: { type: String, default: '创建信息' },
		id: { type: String },
		userLabel: { type: String, default: '创建人：' },
		timeLabel: { type: String, default: '创建时间：' },
		labelWidth: { type: [Number, String], default: '' },
	});

	let createData = reactive({
		name: '',
		time: '',
	});
	function setData(data, timeField = 'createTime', nameField = 'createUserName') {
		createData.time = data[timeField];
		createData.name = data[nameField];
	}

	defineExpose({ createData, setData });
</script>
